<script>
import View from "./View.vue";
import { provide, ref, watch, h, shallowRef } from "vue";
import ObjectView from "./Object.vue";

export default {
    setup() {
        const show = ref(false);

        var Children = shallowRef({
            Col_0: () => [],
            Col_2: () => [],
        });

        const ItemObject = shallowRef({
            Name: h("div", { style: { background: "red" } }, "Name"),
            State: h("div", { style: { background: "red" } }, "State"),
        });

        function GetTemplate() {}

        var option = [
            {
                Target: "div",
                props: {},
                slots: {
                    default: ["AV", "View"],
                },
            },
            {
                Target: "div",
                props: {},
                slots: {
                    default: ["AV", "View"],
                },
            },
        ];

        function RnderSlots() {}

        function RenderEvent(option) {
            var Child = [];

            for (let i = 0; i < option.length; i++) {
                const element = option[i];
                if (typeof element == "string") {
                    Child.push(h("div", null, element));
                } else {
                    var slots = {};
                    for (const key in element.slots) {
                        const item = element.slots[key];
                        slots[key] = () => RenderEvent(item);
                    }
                    var ele = h(element.Target, element.props, slots);
                    Child.push(ele);
                }
            }
            return Child;
        }
        //
        return () => RenderEvent(option);
        // {
        //     return [
        //         h(
        //             "div",
        //             { class: "View" },
        //             {
        //                 default: () => {
        //                     if (show.value) {
        //                         Children.value["Col_1"] = () => [h("div", { style: { background: "red" } }, "State")];
        //                     } else {
        //                         delete Children.value["Col_1"];
        //                     }
        //                     return [h(View, {}, Children.value)];
        //                 },
        //             }
        //         ),
        //         h(
        //             "div",
        //             {
        //                 onClick: () => {
        //                     show.value = !show.value;
        //                 },
        //             },
        //             "Click"
        //         ),
        //     ];
        // };
    },
};
</script>
<style lang="less" scoped></style>
